<template>
	<view :class="{'fixed':isShow}" @click="closeMask">
		<view :class="['drawer',{'show-drawer':isShow}]">
			<view class="drawer-header">
				<view class="drawer-header-bar"></view>
				<slot name="header"></slot>
			</view>
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		methods:{
			closeMask(){
				this.$store.commit('setMask',false)
			}
		},
		computed:{
			isShow(){
				return this.$store.getters.showMasks;
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	$bradius:7%;
	
	.h0{
		height: 0;
	}

	.drawer {
		position: absolute;
		display: inline-flex;
		width: 100vw;
		bottom: 0;
		transform: translateY(100%);
		z-index: 1001;
		display: flex;
		flex-direction: column;
		transition: transform 1s linear,opacity 1s linear,height 1s linear;
		will-change: transform,opacity;
		background-color: #fff;
		border-top-left-radius: $bradius;
		border-top-right-radius: $bradius;
		opacity: 0;
		height: 0rpx;
		overflow: scroll;

		.drawer-header {
			position: sticky;
			top: 10px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			row-gap: 10rpx;
			align-items: center;
			padding: 15rpx 0;
			border-bottom: 2rpx solid #999999;
			backdrop-filter: opacity(50%);
			margin-bottom: 20rpx;

			.drawer-header-bar {
				width: 10%;
				height: 8rpx;
				border-radius: 25%;
				background-color: #707070;
				transition: height .9s linear;
			}
			
		}

	}

	.show-drawer {
		transform: translateY(0);
		opacity: 1;
		height: auto;
		overflow:auto;
	}
</style>
